import React, { useState } from 'react';

const App = () => {
  // 对于一个对象中有些属性会被修改，而有些属性是固定不修改

  // 如果不需要设置修改值，那么第二个参数可以不写
  const [box] = useState({
    w: 100,
    h:100
  })

  const [pos, setPos] = useState({
    x:0,
    y:0
  })

  function mouseMove(event){
    setPos({
      x: event.clientX,
      y: event.clientY,
    })
  }

  return (
    <div style={{width: '100vw', height: '100vh'}} onMouseMove={mouseMove} >
      <div> 元素的宽度： {box.w}, 元素的高度： {box.h} </div>
      <div> 元素的坐标： {pos.x} --- {pos.y} </div>
    </div>
  );
};

export default App;
